<template>
	<view class="w750">
		<view class="w720 mg15">
			<view class="w660 pd30 mh100 mb20">
				<view class="d-row fts24">
					<view class="w130" style="color: #929292;">订单状态：</view>
					<view v-if="userInfoAudit.orderStatus == 0" class="fts24" style="color: #666666;">借用待审批</view>
					<view v-if="userInfoAudit.orderStatus == 1" class="fts24" style="color: #FF4D4F;">借用审批驳回</view>
					<view v-if="userInfoAudit.orderStatus == 2" class="fts24" style="color: #52C41A;">借用审批通过</view>
					<view v-if="userInfoAudit.orderStatus == 3" class="fts24" style="color: #1890FF;">借用中</view>
					<view v-if="userInfoAudit.orderStatus == 4" class="fts24" style="color: #FA8C16;">借用中(逾期)</view>
					<view v-if="userInfoAudit.orderStatus == 5" class="fts24" style="color: #8C8C8C;">归还待审批</view>
					<view v-if="userInfoAudit.orderStatus == 6" class="fts24" style="color: #CF1322;">归还审批驳回</view>
					<view v-if="userInfoAudit.orderStatus == 7" class="fts24" style="color: #73D13D;">归还审批通过</view>
					<view v-if="userInfoAudit.orderStatus == 8" class="fts24" style="color: #434343;">已归还</view>
					<view v-if="userInfoAudit.orderStatus == 9" class="fts24" style="color: #722ED1;">已归还(逾期)</view>
					<view v-if="userInfoAudit.orderStatus == 10" class="fts24" style="color: #820014;">报废</view>
					<view v-if="userInfoAudit.orderStatus == 11" class="fts24" style="color: #333333;">已取消</view>
					<view v-if="userInfoAudit.orderStatus == 12" class="fts24" style="color: #666666;">续借待审批</view>
				</view>
				<view class="d-row mt30 fts24">
					<view class="w130" style="color: #929292;">仪器类型：</view>
					<view class="" style="color: #000000;">{{ userInfoAudit.typeName }}</view>
				</view>
				<view class="d-row mt30 fts24">
					<view class="w130" style="color: #929292;">仪器名称：</view>
					<view class="" style="color: #000000;">{{ userInfoAudit.deviceName }}</view>
				</view>

				<view class="d-row mt30 fts24">
					<view class="w130" style="color: #929292;">仪器规格：</view>
					<view class="" style="color: #000000;">{{ userInfoAudit.deviceSpec }}</view>
				</view>
				
				<view class="d-row mt30 fts24">
					<view class="w130" style="color: #929292;">设备信息：</view>
					<view class="" style="color: #000000;">{{ userInfoAudit.equiCode }} （位置：{{userInfoAudit.equiAddress}}）</view>
				</view>
				
				<view class="d-row mt30 fts24">
					<view class="w130" style="color: #929292;">预计归还：</view>
					<view class="" style="color: #000000;">{{ userInfoAudit.expectTime }}</view>
				</view>
				<!-- <view
					v-if="userInfoAudit.orderStatus == 6 || userInfoAudit.orderStatus == 3 || userInfoAudit.orderStatus == 4"
					class="d-bt  mt30 h70 border_bottom_1 fts24">
					<view class="label">归还审批人：</view>
					<view class="vals">
						<picker mode="selector" range-key="userName" :range="adminList" @change="onPickerChange">
							<view>{{selectedItem}}</view>
						</picker>
					</view>
				</view>
				<view
					v-if="userInfoAudit.orderStatus == 6 || userInfoAudit.orderStatus == 3 || userInfoAudit.orderStatus == 4"
					class="d-bt  mt30 h70 border_bottom_1 fts24">
					<view class="label">归还审批影像上传：</view>
					<view class="vals" @click="chooseImages(1)">选择图片</view>
				</view> -->
				
				<!-- <view class="d-row mt30 fts24"  v-if="(userInfoAudit.orderStatus == 6 || userInfoAudit.orderStatus == 3 || userInfoAudit.orderStatus == 4) && imagePath">
					<view class="label" style="color: #929292;" >归还审批影像：</view>
					<view class="vals">
						<view v-if="imagePath && !imagePath.includes('.mp4')">
							<image style="width: 200rpx; height: 200rpx;"  :src="imagePath" />
						</view>
						<view  v-if="imagePath.includes('.mp4')">
							<video
								style="width: 200rpx; height: 200rpx;" 
								id="myVideo"
								:src="imagePath"
								controls>
							</video>
						</view>						
					</view>
				</view> -->
				
				
				<view
					v-if="(userInfoAudit.orderStatus == 7 ||userInfoAudit.orderStatus == 8 || userInfoAudit.orderStatus == 9) && !realityFilePath"
					class="d-bt  mt30 h70 border_bottom_1 fts24">
					<view class="label">实际归还影像上传：</view>
					<view class="vals" @click="chooseImages(2)">选择图片</view>
				</view>
				
				<view class="d-row mt30 fts24"  v-if="realityFilePath">
					<view class="label" style="color: #929292;" >实际归还影像：</view>
					<view class="vals">
						<view v-if="realityFilePath && !realityFilePath.includes('.mp4')">
							<image style="width: 200rpx; height: 200rpx;"  :src="realityFilePath" />
						</view>
						<view  v-if="realityFilePath.includes('.mp4')">
							<video
								style="width: 200rpx; height: 200rpx;" 
								id="myVideo"
								:src="realityFilePath"
								controls>
							</video>
						</view>						
					</view>
				</view>
				
	
				<view class="d-center">
					<view v-if="userInfoAudit.orderStatus == 7 && userInfoAudit.restitutionQrcode" class="mt30">
						<view style="text-align: center;font-size: 25rpx;line-height: 60rpx;">归还二维码</view>
						<l-qrcode :value="userInfoAudit.restitutionQrcode" :size="120" :marginSize="1"  />
					</view>
					<view v-if="userInfoAudit.orderStatus == 2 && userInfoAudit.borrowQrcode" class="mt30">
							<view style="text-align: center;font-size: 25rpx;line-height: 60rpx;">借用二维码</view>
						<l-qrcode :value="userInfoAudit.borrowQrcode" :size="120" :marginSize="1" />
					</view>
				</view>
			</view>
		</view>
		<view class="w690 mg15 pl10 pr20">
			<uni-steps  :options="stepOptions" :active="stepOptions.length-1" direction="column" ></uni-steps>
		</view>

		<!-- <view v-if="userInfoAudit.orderStatus == 6 || userInfoAudit.orderStatus == 3 || userInfoAudit.orderStatus == 4"
			class="pd030 pos_bottom d-bt mb20">
			<view class="w690 h80 br10 bg_3274CB d-center ftc_fff" @click="openReturnDialog">申请归还</view>
		</view> -->
		
		<view  class="pd030 pos_bottom d-bt mb50">
			<view  v-if="userInfoAudit.orderStatus == 6 || userInfoAudit.orderStatus == 3 || userInfoAudit.orderStatus == 4" 
			 class="w300 h80 br10 bg_3274CB d-center ftc_fff" @click="openReturnDialog">申请归还</view>
			<view v-if="userInfoAudit.orderStatus == 3 || userInfoAudit.orderStatus == 4 " 
			 class="w300 h80 br10 bg_3274CB d-center ftc_fff" @click="openDelayDialog">延期归还</view>
		</view>

		<!-- 申请归还弹出框 -->
		<uni-popup ref="retyrnPopup" type="dialog"  :animation="false">
			<uni-popup-dialog ref="createTypeDialog" mode="input" title="归还申请" value=""
			                    placeholder="请输入内容" @confirm="submitInfo" >
			    <view  class="pd030 w500 fts24">
			
				  <view
				  	v-if="userInfoAudit.orderStatus == 6 || userInfoAudit.orderStatus == 3 || userInfoAudit.orderStatus == 4"
				  	class="d-bt w500   h90 border_bottom_1 fts24">
				  	<view class="label">归还审批人：</view>
				  	<view class="vals">
				  		<picker mode="selector" range-key="userName" :range="adminList" @change="onPickerChange">
				  			<view>{{selectedItem}}</view>
				  		</picker>
				  	</view>
				  </view>
				  <view
				  	v-if="userInfoAudit.orderStatus == 6 || userInfoAudit.orderStatus == 3 || userInfoAudit.orderStatus == 4"
				  	class="d-bt w500   h90 border_bottom_1 fts24">
				  	<view class="label">归还审批影像上传：</view>
				  	<view class="vals" @click="chooseImages(1)">选择图片</view>
				  </view>
				  <view class="d-row mt30 mb30 fts24"  v-if="(userInfoAudit.orderStatus == 6 || userInfoAudit.orderStatus == 3 || userInfoAudit.orderStatus == 4) && imagePath">
				  	<view class="label"  >归还审批影像：</view>
				  	<view class="vals">
				  		<view v-if="imagePath && !imagePath.includes('.mp4')">
				  			<image style="width: 200rpx; height: 200rpx;"  :src="imagePath" />
				  		</view>
				  		<view  v-if="imagePath.includes('.mp4')">
				  			<video
				  				style="width: 200rpx; height: 200rpx;" 
				  				id="myVideo"
				  				:src="imagePath"
				  				controls>
				  			</video>
				  		</view>						
				  	</view>
				  </view>
				  
				  
			    </view>
			  </uni-popup-dialog>
		</uni-popup>
		
		<!-- 申请延期归还弹出框 -->
		<uni-popup ref="popup" type="dialog"  :animation="false">
			<uni-popup-dialog ref="createTypeDialog" mode="input" title="延期归还申请" value=""
			                    placeholder="请输入内容" @confirm="submitDelayInfo">
			    <view  class="pd030 w500 fts24">
				<view class="d-bt w500 h90 border_bottom_1">
					<view class="label">续借审批人：</view>
					<view class="vals">
						<picker mode="selector" range-key="userName" :range="adminList" @change="onRenewPickerChange">
							<view>{{selectedRenew}}</view>
						</picker>
					</view>
				</view>
				  
				  <view class="d-bt w500 h90 border_bottom_1">
				  	<view class="label">预计归还日期：</view>
				  	<view class="vals">
				  		<picker mode="date" @change="onDateChange" :value="expectDateNew">
				  			<view class="date-picker">{{expectDateNew}}</view>
				  		</picker>
				  	</view>
				  </view>
				  
				  <view class="d-bt w500 h90 border_bottom_1">
				  	<view class="label">预计归还时间：</view>
				  	<view class="vals">
				  		<picker mode="time" @change="onDateTimeChange" :value="expectTimeNew">
				  			<view class="date-picker">{{expectTimeNew}}</view>
				  		</picker>
				  	</view>
				  </view>
				  
				  
			    </view>
			  </uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	import mixin from "./mixin";
	import mixinCom from "@/utils/mixinCom.js";
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	// import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'

	export default {
		name: "tabbarIndex",
		mixins: [mixin, mixinCom],
		components: {uniSteps}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>